<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./utils/reset.css"></link>
    <title>画一个点</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>

    <!-- 顶点着色器代码 -->
    <script type="shader-source" id="vertexShader">
      void main(){
        // 定点位置
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
        // 将要绘制点的大小
        gl_PointSize = 50.0;
      }
    </script>

    <!-- 片元着色器代码 -->
    <script type="shader-source" id="fragmentShader">
      void main(){
        // 设置像素颜色
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    </script>

    <script src="./utils/webgl-helper.js"></script>

    <script>
      const canvas = getCanvas("#canvas");
      resizeCanvas(canvas);

      const gl = getContext(canvas);

      // 创建顶点着色器
      const vertexShader = createShaderFromScript(
        gl,
        gl.VERTEX_SHADER,
        "vertexShader"
      );

      // 创建片元着色器
      const fragmentShader = createShaderFromScript(
        gl,
        gl.FRAGMENT_SHADER,
        "fragmentShader"
      );

      // 创建着色器程序
      const program = createSimpleProgram(gl, vertexShader, fragmentShader);

      // 使用着色器
      gl.useProgram(program);
      // 设置清屏颜色
      gl.clearColor(0, 0, 0, 1);
      // 清屏
      gl.clear(gl.COLOR_BUFFER_BIT);
      // 绘制一个点
      gl.drawArrays(gl.POINTS, 0, 1);
    </script>
  </body>
</html>
